<template>
  <div class="table-component">
    <div class="total-amount">
      <div class="total-amount-title">基础信息</div>
    </div>
    <div style="display: flex">
      <div style="width: 70%">
        <el-row>
          <el-col :span="8">
            <el-row class="content">
              <div class="label">车牌号码：</div>
              <div class="title">{{ orderDetails.licensePlate }}</div>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row class="content">
              <div class="label">手机号码：</div>
              <div class="title">{{ orderDetails.ownerPhone }}</div>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row class="content">
              <div class="label">卡类型：</div>
              <div class="title">{{ orderDetails.type }}</div>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-row class="content">
              <div class="label">开卡时间：</div>
              <div class="title">{{ orderDetails.openTime }}</div>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row class="content">
              <div class="label">卡有效期：</div>
              <div class="title">
                {{ orderDetails.validityStart }}至{{ orderDetails.validityEnd }}
              </div>
            </el-row>
          </el-col>
          <el-col :span="8"> </el-col>
        </el-row>
      </div>
      <div style="width: 30%">
        <el-row>
          <el-col :span="12">
            <div>
              <div class="label">卡状态</div>
              <div class="title2">
                {{
                  orderDetails.status == 1
                    ? "未启用"
                    : orderDetails.status == 2
                    ? "生效中"
                    : orderDetails.status == 3
                    ? "已过期"
                    : orderDetails.status == 4
                    ? "封存中"
                    : orderDetails.status == 5
                    ? "已注销"
                    : "-"
                }}
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <div class="label">
                {{ orderDetails.status == 3 ? "过期" : "剩余" }}天数
              </div>
              <div class="title2" v-if="orderDetails.days">{{ orderDetails.days }}天</div>
              <div class="title2" v-else>--</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-row class="content" v-if="orderDetails.scope == 3 || orderDetails.scope == 1">
      <div class="label">适用车场：</div>
      <div class="title">{{ orderDetails.lot }}</div>
    </el-row>
    <el-row class="content" v-if="orderDetails.scope == 3 || orderDetails.scope == 2">
      <div class="label">适用路段：</div>
      <div class="title">{{ orderDetails.section }}</div>
    </el-row>
  </div>
</template>

<script setup>
const props = defineProps({
  orderDetails: {
    type: Object,
    default: () => {},
  },
});
</script>

<style lang="less" scoped>
.table-component {
  .total-amount {
    margin-bottom: 17px;
  }
  .total-amount-title {
    font-weight: 600;
    font-size: 16px;
    color: #1d2129;
  }
  .content {
    margin-bottom: 20px;
  }
  .label {
    font-weight: 400;
    font-size: 14px;
    color: #666666;
  }
  .title {
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }
  .title2 {
    margin-top: 7px;
    font-weight: 400;
    font-size: 20px;
    color: #333333;
  }
}
</style>
